<template>
  <el-drawer
    size="60%"
    :wrapperClosable="false"
    :title="fileName"
    :visible.sync="show"
    :before-close="handleClose">
    <div class="file">
      <vue-office-docx
        v-if="isdocx"
        :src="src"
        @rendered="rendered"
        style="width: 100%; height: 100%"
      />
      <vue-office-excel
        v-if="isexcel"
        :src="src"
        @rendered="rendered"
        style="width: 100%; height: 100%"
      />
      <vue-office-pdf
        v-if="ispdf"
        :src="fileSrc"
        @rendered="rendered"
        style="width: 100%; height: 100%"
      />
    </div>
  </el-drawer>
</template>

<script>
//引入VueOfficeDocx组件
import VueOfficeDocx from "@vue-office/docx";
//引入相关样式
import "@vue-office/docx/lib/index.css";
//引入VueOfficeExcel组件
import VueOfficeExcel from "@vue-office/excel";
//引入相关样式
import "@vue-office/excel/lib/index.css";
//引入VueOfficePdf组件
import VueOfficePdf from "@vue-office/pdf";
export default {
  props: {
    drawer: {
      type: Boolean,
      default: false
    },
    fileName: {
      type: String,
      default: ''
    },
    src: {
      type: String,
      default: ''
    }
  },
  components: { VueOfficeDocx, VueOfficeExcel, VueOfficePdf },
  computed: {
    show: {
      get() {
        return this.drawer
      },
      set(val) {
        this.$emit('update:drawer', val)
      }
    }
  },
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_URL,
      isdocx: false,
      isexcel: false,
      ispdf: false,
      fileSrc: ''
    }
  },
  mounted() {
    if (this.src && this.src != "") {
      this.previewFile()
    }
  },
  methods: {
    rendered() {
      console.log("渲染完成");
    },
    handleClose() {
      this.show = false

    },
    previewFile() {
      // 根据文件格式显示预览内容
      this.fileSrc = this.src
      let name = this.fileName.split('.')[1]
      if (name === "xlsx") {
        this.isexcel = true;
      }
      if (name === "docx" || name === "doc") {
        this.isdocx = true;
      }
      if (name === "pdf" || name === "PDF") {
        this.ispdf = true;
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.file {
  width: 100%;
  height: 100%;
  .child {
    width: 100%;
    height: 100%;
  }
}
</style>